import styles from "../styles.less";
import {Card} from "antd";
import React, {useEffect, useState} from "react";
import {Column} from '@ant-design/plots';
import {connect} from "umi";
import {getTimeDistance} from "@/utils/utils";
import dayjs from "dayjs";

const ColumnChart = (props) => {

  const {list} = props;
  const [rangePickerValue, setRangePickerValue] = useState(getTimeDistance('year'));

  useEffect(() => {
    if (rangePickerValue) {
      console.log(dayjs(rangePickerValue[0]).format("YYYY-MM-DD"))
      console.log(dayjs(rangePickerValue[1]).format("YYYY-MM-DD"))
    }
  }, [rangePickerValue]);

  const selectDate = (type) => {
    setRangePickerValue(getTimeDistance(type));
  };

  const isActive = (type) => {
    if (!rangePickerValue) {
      return '';
    }

    const value = getTimeDistance(type);
    if (!value) {
      return '';
    }

    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }

    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }
    return '';
  };

  const config = {
    data: list,
    padding: 'auto',
    xField: 'name',
    yField: 'count',
    autoFit: true,
    meta: {
      count: {
        alias: '总数',
      },
    },
    axis: {
      x: {size: 6, labelAutoHide: true},
      y: {
        tick: true,
        labelFormatter: d => {
          return d / 100;
        }
      },
    },
    tooltip: {
      name: '标签',
      channel: 'y',
      valueFormatter: (d) => {
        let value = (d / 100).toFixed(2);
        return `${value}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
      }
    },
  };


  return (
    <Card
      className={styles.myCard2739482}
      title={"柱状图表"} bordered={false} style={{marginBottom: 5}} size={"small"}
      extra={<div className={styles.cardExtraWrap}>
        <div className={styles.cardExtra}>
          <a className={isActive('today')} onClick={() => selectDate('today')}>今日</a>
          <a className={isActive('week')} onClick={() => selectDate('week')}>本周</a>
          <a className={isActive('month')} onClick={() => selectDate('month')}>本月</a>
          <a className={isActive('year')} onClick={() => selectDate('year')}>本年</a>
        </div>
      </div>}>
      <div style={{height: 'calc(50vh - 218px)'}}>
        <Column {...config} />
      </div>
    </Card>
  );
};

export default connect(({}) => {
  return {
    list: [
      {name: "1月", count: 20},
      {name: "2月", count: 3},
      {name: "3月", count: 34},
      {name: "4月", count: 64},
      {name: "5月", count: 24},
      {name: "6月", count: 54},
      {name: "7月", count: 99},
      {name: "8月", count: 24},
      {name: "9月", count: 15},
      {name: "10月", count: 56},
      {name: "11月", count: 68},
      {name: "12月", count: 35},
    ],
  };
})(ColumnChart);
